ActionCardContent

info

Check if a template card exists for your use-case before making a new card template / single-use card.

The Action Card Content component is used to ensure a consistent layout for the action card's content.

It consists of a header, body, and a footer. The header will always contain the title if there is one provided by the ActionCardTitle. The footer is used for components that require the user's input such as buttons. The body is for the card's content such as descriptions, images etc.

Usage

Below sees a basic example with just a title, image, a description and a 'next' button.

    <ActionCardContent>        // Title        <ActionCardTitle />
        // Body        <ActionCardImage img={img}/>        <ActionCardDescription>This is a description </ActionCardDescription>
        //Footer        <ActionCardButton />    </ActionCardContent>

Centering content

Sometimes centered content is desired, and this is easily made possible by passing the center prop to the component. This will center both the header and body content, but not the footer content as that will always be full width.

caution

Centering disables the scrolling functionality

    <ActionCardContent center>        // Title        <ActionCardTitle />
        // Body        <ActionCardImage img={img}/>        <ActionCardDescription>This is a description </ActionCardDescription>
        //Footer        <ActionCardButton />    </ActionCardContent>

Props

Name	Type	Default	Description
center	boolean	false	Centers the header and body content, and disables scrolling
backgroundImage	SVG	undefined	Background Image in SVG format
backgroundOptions	{offsetX: number, offsetY: number, opacity: numbers}	undefined	Options for the background image. Currently only offset and opacity.